<template>
  <!-- body -->
  <div id="main">
    <div class="download_pay_QRCode_big">
      <div class="download_pay_QRCode_center">
        <div class="download_top_box">
          <div class="top_text_box">
            <span>信息费</span>
          </div>
          <div class="top_number_box">
            <span>{{QRcodeList.informationCosts}}元</span>
          </div>
        </div>
        <hr class="hr_style">
        <div class="download_center_box">
          <div class="cell_text_box">
            <div class="text_box" v-for="(item,index) in QRcodeList.orderMessageList" :key="index">
              <span class="text_left">{{item.left}}</span>
              <span class="text_right">{{item.right}}</span>
            </div>
          </div>
        </div>
        <div class="download_bottom_box">
          <div class="bottom_left_image" ref="qrCodeUrl">
            <!-- <img src="./images/test_QRcode.jpg" alt=""> -->
          </div>
          <div class="bottom_right_image">
            <img src="./images/share_fingerprint.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
import upload from "@/common/upload.js";

export default {
  data() {
    return {
      // 路由跳转传递过来的参数
      QRcodeList:{},
      // 获取当前用户登录token值
      token:'',
      // 保存车煮支付二维码
      imageUrl:''
    }
  },
  methods: {
    // 下载图片
    download() {
      // 截图下载
      html2canvas(document.getElementById('main'), {
        backgroundColor: 'white', // 画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, // 支持图片跨域
        scale: 1 // 设置放大的倍数
      }).then((canvas) => {
        // 截图用img元素承装，显示在页面的上
        let img = new Image()
        // 如果你需要下载截图，可以使用a标签进行下载
        let a = document.createElement('a')
        a.href = canvas.toDataURL('image/png')
        console.log('%c [ a.href ]-66', 'font-size:13px; background:pink; color:#bf2c9f;', a.href)
        a.download = '车煮支付二维码'
        // a.click()
        //将base64转换为文件
        let arr = a.href.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        let flie =  new File([u8arr], 'png', {type:mime});
        let formData = new FormData();
        formData.append("file", flie);
        upload(
          (list) => {
            // this.imageUrl = list[0].url
            let imageUrl = list[0].url
            this.$nextTick(()=>{
              // h5与uniapp的交互 => 分享车煮支付二维码到微信
              if (window.UniAppJSBridge) {
                uni.postMessage({
                  data:{
                    type:11,
                    title:'车煮支付二维码',
                    // _imageUrl:this.imageUrl
                    _imageUrl:imageUrl
                  }
                })
              }
            })
          },
          [formData]
        );
        setTimeout(() => {
          this.$router.push({
            name:'auditDetailFindCar',
            query:{
              id: this.$route.query.id
            }
          })
        }, 3000)
      })
    },
    // 生成二维码
    creatQrCode() {
      const conf = require('../../../utils/conf')
      const baseURL = conf.baseURL
      this.token = sessionStorage.getItem('token')
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: `${baseURL}findcar/FindCarDetail?id=${this.id}`, // 需要转换为二维码的容
        // text: `https://hnbin.mynatapp.cc/capp/#/findcar/FindCarDetail?id=${this.id}`, // 需要转换为二维码的容
        // token=${this.token}&
        // text: `http://192.168.1.38:9099/#/findcar/FindCarDetail?id=${this.id}`, // 需要转换为二维码的容
        // width: 100,
        // height: 100,
        width: 120,
        height: 120,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.creatQrCode()
    this.QRcodeList = this.$route.query.QRcodeList
    this.$nextTick(() => {
      let myText = document.querySelector('.text_right').innerText
      console.log('%c [ myText ]', 'font-size:13px; background:pink; color:#bf2c9f;', myText.length)
      if (myText.length > 20) { /*  && myText.length <= 42 */
        document.querySelector('.text_left').style.paddingBottom = '30px'
      } /* else if (myText.length >= 43) {
        document.querySelector('.text_left').style.paddingBottom = '60px'
      } */
      this.download()
    })
  }
}
</script>

<style lang="less" scoped>
#main{
  width: 375px;
  height: 667px;
  .download_pay_QRCode_big{
    width: 375px;
    height: 667px;
    background-image: url('./images/share_bgimage.png');
    background-size: 100% 100%;
    .download_pay_QRCode_center{
      background-image: url('./images/share_bgcolor.png');
      background-size: 100% 100%;
      width: 335px;
      height: 502px;
      margin-left: 50%;
      // margin-top: 50%;
      transform: translate(-50%,141px);
      .download_top_box{
        width: 335px;
        height: 103px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: -12px;
        .top_text_box{
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 15px;
        }
        .top_number_box{
          margin-top: 8px;
          font-size: 30px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 30px;
        }
      }
      .hr_style{
        width: 80%;
        height:1px;
        border:none;
        border-top:1px solid #E6E6E6;
      }
      .download_center_box{
        width: 335px;
        height: 202px;
        display: flex;
        justify-content: center;
        align-items: center;
        .cell_text_box{
          width: 282px;
          height: 202px;
          .text_box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .text_left{
              font-size: 15px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              line-height: 30px;
            }
            .text_right{
              font-size: 15px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 30px;
              width: 220px;
              text-align: right;
            }
          }
        }
      }
      .download_bottom_box{
        margin-top: 33px;
        display: flex;
        .bottom_left_image{
          // width: 110px;
          // height: 110px;
          // margin-left: 35px;
          width: 125px;
          height: 125px;
          margin-left: 30px;
          background-color: #fff; //设置白色背景色
          padding: 8px; // 利用padding的特性，挤出白边
          // box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .bottom_right_image{
          width: 120px;
          height: 122px;
          margin-left: 36px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
